<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <title th:text="注册"></title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="WAP游戏,文字游戏,怀旧,mud">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telphone=no,email=no">
    <meta name="misapplication-tap-highlight" content="no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <!--<link rel="stylesheet" type="text/css" th:href="@{/assets/modules/mojie/mojie.css}" />-->
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min-3.4.0.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/custom.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/font-awesome-4.3.0.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/animate.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/style-2.2.0.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/index.css}" />
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
    <div class="form-signin">
        <div id="stage">
            <div id="inner">
                <div id="cover">
                    <div id="text">
                        <span style="color: cyan;">H</span><span style="color: white;">+</span>
                    </div>
                    <div id="detail"></div>
                    <div id="handle"></div>
                </div>
                <canvas class="mb-4" id="live2d" width="800" height="800"></canvas>
            </div>
            <a id="info" href="javascript:info()"><i class="fa fa-lg fa-info"></i></a>
            <a id="refresh" href="javascript:refresh()"><i class="fa fa-lg fa-refresh"></i></a>
        </div>
        <h3>欢迎注册 《修仙》</h3>
        <form class="m-t" id="zc" role="form" method="post" action="register">
            <div class="form-group">
                <input name="name" type="text" class="form-control" placeholder="请输入您的邮箱" required="">
            </div>
            <div class="item">
                <input type="text" name="vcode" maxlength="6" placeholder="请输入邮箱验证码" autocomplete="off" class="vcode">
                <span id="vcode" class="btn btn-primary block full-width2 m-b" style="width: 15px">发送验证码</span>
            </div>
            <div class="form-group">
                <input id="pwd" name="password" type="password" class="form-control" placeholder="请输入密码" required="">
            </div>
            <div class="form-group">
                <input id="confirm" name="confirm" type="password" class="form-control" placeholder="请再次输入密码" required="">
            </div>

            <button type="submit" class="btn btn-primary block full-width m-b">注 册</button>

            <p class="text-muted text-center"><small>已经有账户了？</small><a href="login">点此登录</a>
            </p>
            <img th:src="@{/assets/picture/1.gif}" style="width: 100%;">
        </form>
    </div>
</div>

<!-- Mainly scripts -->
<script th:src="@{/assets/js/jquery-2.1.1.min.js}" type="text/javascript" ></script>
<script th:src="@{/assets/js/bootstrap.min-3.4.0.js}" type="text/javascript" ></script>
<!-- iCheck -->
<script th:src="@{/assets/js/icheck.min.js}" type="text/javascript" ></script>
<!-- Jquery Validate -->
<script th:src="@{/assets/js/jquery.validate.min.js}" type="text/javascript" ></script>

<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $("#zc").validate({
            rules: {
                confirm: {
                    equalTo: "#pwd"
                }
            },
            messages: {
                username: {
                    required: "请输入您的用户名"
                },
                password: {
                    required: "请输入您的密码"
                },
                confirm: {
                    required: "请再次输入您的密码",
                    equalTo: "两次输入的密码不一致"
                },
            }
        });
    });
</script>
<script type="text/javascript">
    function stop() {
        return false;
    }
    document.oncontextmenu = stop;
</script>
<script th:src="@{/assets/js/live2d.min.js}" type="text/javascript" ></script>
<script th:src="@{/assets/js/index.js}" type="text/javascript" ></script>
</body>
</html>
<script type="text/javascript">
    // 验证码
    var time=10;
    var code =0;
    $('#vcode').click(function(){
        var phone = $('input[name=name]').val();
        if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(phone)){
            alert("请先输入正确邮箱")
            return
        }
        if($(this).hasClass('disabled')){
            return
        }
        $('#vcode').addClass('disabled')
        $('#vcode').text("倒计时 " + time)
        var timer = setInterval(function(){
            time--
            $('#vcode').text("倒计时 " + time)
            if(time==0){
                $('#vcode').text("发送验证码 ");
                clearInterval(timer)
                $('#vcode').removeClass("disabled ");
                time = 60
            }
        },1000)

        $.post("email",{email:phone},function (str) {
            code=str;
        })
    })
    // 提交验证
    $('.submit button').click(function(){
        var name = $('input[name=name]').val();
        var vcode = $('input[name=vcode]').val();
        var password = $('input[name=password]').val();
        if($.trim(name)==''){
            alert("请输入帐号")
            $('input[name=name]').focus()
            return false
        }
        if($.trim(vcode)==''){
            alert("请输入验证码")
            $('input[name=vcode]').focus()
            return false
        }
        if($.trim(password)==''){
            alert("请输入密码")
            $('input[name=password]').focus()
            return false
        }
        if($.trim(vcode)!=code){
            alert("验证码错误")
            $('input[name=vcode]').focus()
            return false
        }
        if($.trim(vcode)==null){
            alert("验证码不能为空")
            $('input[name=vcode]').focus()
            return false
        }
       $("#zc").submit;
    })
</script>